.main-container {
    //background: #fff;
    //padding: 10px;
    height: 100%;
    background-color: #ececec;
    .water-takes-tab {
        background: #fff;
        height: 100%;
        ::ng-deep .ant-tabs-bar {
            margin: 0;
        }
    }
}

.box-container {
    background: #ececec;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.process-bar {
    height: 35px;
    line-height: 35px;
    margin: 0;
    padding-left: 20px;
    background: #fffaea;
    cursor: pointer;
    a {
        text-decoration: solid;
    }
}

.main-content {
    flex: 1;
    height: calc(100% - 35px);
    overflow-y: auto;

    .main-content-wrap {
        display: flex;
        width: 100%;
        min-height: 100%;
    }
    .left-panel {
        width: 200px;
        margin: 10px 0 10px 10px;
        background: #fff;
        .water-takes-left-menu {
            height: 100%;
            ::ng-deep {
                .ant-menu-item {
                    margin-top: 0;
                }
                .ant-menu-item::after {
                    width: 2px;
                    background-color: #5d9ffb;
                    right: auto;
                    left: 0;
                }
                .ant-menu-item-selected {
                    background-color: #f3f8fc;
                }
            }
        }
    }

    .right-panel {
        flex: 1;
        margin: 10px;

        .right-top-box {
            background: #fff;
            padding: 15px;
            .content-top-bar {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                .right-title {
                    font-size: 14px;
                    font-weight: bold;
                }
                .right-ctrl-box {
                    > div {
                        display: inline-block;
                    }
                    .custom-btn-group {
                        margin-left: 10px;
                        a {
                            margin-left: 8px;
                            line-height: 40px;
                            text-decoration: solid;
                        }
                    }
                }
            }
        }
        .right-bottom-box {
            margin-top: 10px;
            background: #fff;
            padding: 15px;
            .charts-container {
                margin-top: 10px;
                display: flex;

                .charts-cell {
                    flex: 1;
                }
            }
        }
    }
}

.green {
    color: #0aa920;
}

.red {
    color: #ee080c;
}

.yellow {
    color: #ffc81f;
}
.card-box {
    width: calc(100% / 3);
    flex: 1;

    &:first-child {
        .table-card {
            margin-left: 0;
        }
    }

    &:last-child {
        .table-card {
            margin-right: 0;
        }
    }
    .table-card {
        margin: 5px;
        height: 100%;
        &:hover {
            cursor: pointer;
            box-shadow: 5px 12px 8px -12px rgba(0, 0, 0, 0.3);
        }
    }
}
.main-table {
    tr.custom-head > th {
        background: #E7ECF1;
        border-right: 1px solid #D3D8DE;
        border-bottom: 1px solid #D3D8DE;
    }
    tr.even {
        background: #F8FAFB;
    }
}
